<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 键盘事件	        触发条件
        // onkeyup	    某个键盘按键被松开时触发
        // onkeydown	某个键盘按键被按下时触发
        // onkeypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头等

        // 1、keyup 键松开时触发
        // 传统方式
        // document.onkeyup = function() {
        //     console.log('我松开了键');
        // }

        // 如果使用addEventListener 不需要加 on
        document.addEventListener('keyup', function() {
            // alert('我松开了键');
            console.log('我松开了键');
        })

        // 2.keydown 键按下时触发 能识别功能键 ctrl shift alt等
        document.addEventListener('keydown', function() {
            // alert('我按下了键');
            console.log('我按下了键');
        })

        // 3.keypress 键按下时触发 *不能识别功能键 ctrl shift alt等
        document.addEventListener('keypress', function() {
            // alert('我按下了键press');
            console.log('我松开了键是keypress的');
        })


        // 三个键盘事件的执行顺序是 keydown -- keypress -- keyup
        // 实际开发中 更多使用keyup和keydown，它能识别所有的键（包括功能键）
    </script>
</body>

</html>